<!DOCTYPE html>
<html lang="en">

<head>
    <title>THREE-SKY</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
    <link rel="icon" href="/src/assets/k.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #fff;
            color: #444;
        }

        a {
            color: #08f;
        }
    </style>
</head>

<body>
    <div id="info">
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->

    <script type="importmap">
			{
				"imports": {
                    "three": "../../node_modules/three/build/three.module.js"
                }
			}
		</script>


    <script type="module">

        import * as THREE from 'three';
        import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js'
        import { Sky } from '../../node_modules/three/examples/jsm/objects/Sky.js';
        let SCREEN_WIDTH = window.innerWidth;
        let SCREEN_HEIGHT = window.innerHeight;

        let container, stats;
        var camera, scene, renderer;
        let sky, sun;
        let cameraControls;

        let effectController = {
            turbidity: 10,
            rayleigh: 3,
            mieCoefficient: 0.005,
            mieDirectionalG: 0.7,
            elevation: 4,
            azimuth: 180,
            exposure: 0.5,
        };

        init();
        animate();

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            // CAMERA
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
            camera.position.set(500, 800, 1300);
            camera.lookAt(0, 0, 0);
            // SCENE
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xffffff);
            scene.fog = new THREE.Fog(0xffffff, 1000, 4000);
            scene.add(camera);

            // LIGHTS
            scene.add(new THREE.AmbientLight(0x222222));
            const light = new THREE.DirectionalLight(0xffffff, 2.25);
            light.position.set(200, 450, 500);
            light.castShadow = true;
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 512;
            light.shadow.camera.near = 100;
            light.shadow.camera.far = 1200;
            light.shadow.camera.left = - 1000;
            light.shadow.camera.right = 1000;
            light.shadow.camera.top = 350;
            light.shadow.camera.bottom = - 350;
            scene.add(light);
            //  GROUND

            const axesHelper = new THREE.AxesHelper(10000);
            scene.add(axesHelper);

            const size = 10000;
            const divisions = 200;

            const gridHelper = new THREE.GridHelper(size, divisions, 0xff4400, 0x000000);
            scene.add(gridHelper);

            // RENDERER
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            container.appendChild(renderer.domElement);
            document.addEventListener('resize', onWindowResize);

            cameraControls = new OrbitControls(camera, renderer.domElement);
            cameraControls.enableRotate = true;
            // 限制旋转最大角度
            cameraControls.maxPolarAngle = 4 / Math.PI;
            // cameraControls.minPolarAngle = 4 / Math.PI;
            cameraControls.target.set(0, 50, 0);
            // cameraControls.enableZoom = false;
            // cameraControls.keys = {
            //     LEFT: 'ArrowLeft', //left arrow
            //     UP: 'KeyQ', // up arrow
            //     RIGHT: 'ArrowRight', // right arrow
            //     BOTTOM: 'KeyE' // down arrow
            // }
            cameraControls.update();


            //创建sky
            sky = new Sky();
            sky.scale.setScalar(450000);
            scene.add(sky);
            //创建太阳
            sun = new THREE.Vector3();

            const uniforms = sky.material.uniforms;
            uniforms['turbidity'].value = effectController.turbidity;
            uniforms['rayleigh'].value = effectController.rayleigh;
            uniforms['mieCoefficient'].value = effectController.mieCoefficient;
            uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
            const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
            const theta = THREE.MathUtils.degToRad(effectController.azimuth);
            sun.setFromSphericalCoords(1, phi, theta);
            uniforms['sunPosition'].value.copy(sun);
            renderer.toneMappingExposure = 0.5;



        }

        function onWindowResize() {
            SCREEN_WIDTH = window.innerWidth;
            SCREEN_HEIGHT = window.innerHeight;
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
            camera.updateProjectionMatrix();
        }

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            camera.updateProjectionMatrix();
            renderer.render(scene, camera);
        }
    </script>

</body>

</html>